<template>
    <div style="margin-top: 50px">

        <!--库存一览标题-->
        <el-row style="margin-right: 150px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="font-size: 25px">库存一览</span>
            </div></el-col>
        </el-row>

        <!--表格-->
        <el-row style="margin-top: 25px;margin-left: 50px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-table
                            :data="tableData"
                            width="100%"
                            height="250"
                            highlight-current-row
                            @current-change="handleCurrentChange">
                        <el-table-column
                                property="name"
                                label="商品名称"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                property="typeBean.name"
                                label="类别"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                property="mill"
                                label="厂家"
                                width="250">
                        </el-table-column>
                        <el-table-column
                                property="count"
                                label="库存数量"
                                width="100">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!--分页和查询还有按钮-->
        <el-row style="margin-top: 30px;margin-right: 400px">
            <el-col :span="14"><div class="grid-content bg-purple">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        @current-change="change">
                </el-pagination>
                <div style="margin-top: 100px">
                    <el-button type="success" @click="findById">商品详细信息</el-button>
                    <el-button type="success" @click="updateShow">修改销售价</el-button>
                </div>
            </div></el-col>

            <el-col :span="10"><div class="grid-content bg-purple-light">
                <el-card class="box-card" style="width: 600px">
                    <span>查询商品</span><br>
                    <el-form ref="form" :model="form" label-width="80px" style="margin-left: 50px;margin-right: 50px;margin-top: 10px">
                        <el-row>
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item label="商品名称">
                                    <el-input v-model="productName"></el-input>
                                </el-form-item>
                                <el-form-item label="起始数量">
                                    <el-input v-model="start"></el-input>
                                </el-form-item>
                            </div></el-col>

                            <el-col :span="12"><div class="grid-content bg-purple">
                                <el-form-item label="类别">
                                    <select style="width: 150px;height: 40px;" name="" id="typeId">
                                        <option v-for="type in types" :key="type" :value="type.id">{{type.name}}</option>
                                    </select>
                                </el-form-item>
                                <el-form-item label="结束数量">
                                    <el-input v-model="end"></el-input>
                                </el-form-item>
                            </div></el-col>
                        </el-row>


                    </el-form>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-card>
            </div></el-col>
        </el-row>

        <!--查看供应商弹框-->
        <el-dialog
                title="商品详细信息"
                :visible.sync="queryProduct"
                width= "30%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-left: 50px;margin-right: 50px">
                <el-form-item label="商品图片:">
                    <div class="demo-image">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="url"
                        ></el-image>
                    </div>
                </el-form-item>
                <el-form-item label="商品编号:">
                    <span>{{number}}</span>
                </el-form-item>
                <el-form-item label="商品名称:">
                    <span>{{name}}</span>
                </el-form-item>
                <el-form-item label="厂家">
                    <span>{{mill}}</span>
                </el-form-item>
                <el-form-item label="类别:">
                    <span>{{type}}</span>
                </el-form-item>
                <el-form-item label="建议采购价:">
                    <span>{{purchase}}</span>
                </el-form-item>

                <el-form-item label="库存数量:">
                    <span>{{count}}</span>
                </el-form-item>
                <el-form-item label="建议销售价:">
                    <span>{{sale}}</span>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--修改供应商弹框-->
        <el-dialog
                title="修改商品销售价"
                :visible.sync="updateProduct"
                width= "30%"
        >
            <el-form ref="form" :model="form" label-width="100px" style="margin-left: 50px;margin-right: 50px">
                <el-form-item label="商品图片:">
                    <div class="demo-image">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="url"
                        ></el-image>
                    </div>
                </el-form-item>
                <el-form-item label="商品编号:">
                    <span>{{number}}</span>
                </el-form-item>
                <el-form-item label="商品名称:">
                    <span>{{name}}</span>
                </el-form-item>
                <el-form-item label="厂家">
                    <span>{{mill}}</span>
                </el-form-item>
                <el-form-item label="类别:">
                    <span>{{type}}</span>
                </el-form-item>
                <el-form-item label="建议采购价:">
                    <span>{{purchase}}</span>
                </el-form-item>

                <el-form-item label="库存数量:">
                    <span>{{count}}</span>
                </el-form-item>
                <el-form-item label="建议销售价:">
                    <el-input v-model="sale" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="update">修改</el-button>
        </el-dialog>




    </div>
</template>

<script>
    export default {
        name: "Product",
        data(){
            return{
                queryProduct:false,
                updateProduct:false,

                //商品表格数据
                tableData:"",
                productId:"",

                //动态条件查询
                productName:"",
                start:"",
                types:"",
                end:"",
                //分页参数
                current:1,
                pageSize:4,
                total:20,

                //查看详情页面
                number:"",
                mill:"",
                name:"",
                purchase:"",
                sale:"",
                count:"",
                url:"",
                type:"",
            }
        },mounted() {
            this.init();
        },
        methods:{
            init(){
                this.axios.get("jxc/type/findAll").then(
                    r => this.types = r.data
                );
                this.axios.get("jxc/product/findByItemAndPage",{
                    params:{
                        current:this.current,
                        pageSize:this.pageSize
                    }
                }).then(
                    r => {
                        this.tableData = r.data.records;
                        this.total = r.data.total;
                    }
                )
            },
            handleCurrentChange(val){
                this.productId = val.id;
            },
            query(){
                this.axios.get("jxc/product/findByItemAndPage",{
                    params:{
                        current:1,
                        pageSize:this.pageSize,
                        productName:this.productName,
                        typeId:this.selectValue(),
                        startNum:this.start,
                        endNum:this.end,
                    }
                }).then(
                    r => {
                        this.tableData = r.data.records;
                        this.total = r.data.total;
                    }
                )
            },
            selectValue(){
                let id = document.getElementById("typeId");
                console.log(id.options[id.selectedIndex].value);
                return id.options[id.selectedIndex].value
            },
            change(current){
                this.current = current;
                this.init();
            },
            findById(){
                this.axios.get("jxc/product/findById",{params:{id:this.productId}}).then(
                    r => {
                        this.number = r.data.number;
                        this.name = r.data.name;
                        this.mill = r.data.mill;
                        this.purchase = r.data.purchase;
                        this.sale = r.data.sale;
                        this.count = r.data.count;
                        this.type = r.data.typeBean.name;
                        this.url = "jxc/img/"+r.data.img;
                    }
                )
                this.queryProduct = true;
            },
            updateShow(){
                this.findById();
                this.queryProduct = false;
                this.updateProduct = true;
            },
            update(){
                let formData = new FormData();
                formData.append("id",this.productId);
                formData.append("money",this.sale);
                this.axios.put("jxc/product/update",formData).then(
                    r => {
                        if (r.data == "ok") {
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                                duration: 1000
                            });
                        } else if (r.data == "no") {
                            this.$message({
                                message: '修改失败',
                                type: 'error',
                                duration: 1000
                            });
                        }
                    }
                );
                this.updateProduct = false;
            }
        }
    }
</script>

<style scoped>

</style>